<template>
	<!-- 优惠券 -->
	<view class="">
		<!-- tab -->
		<view class="" style="width:400rpx;margin: 0 auto;;margin-top: 20rpx;">
			<uv-subsection
			activeColor="#fa4d44"
			inactiveColor="#777"
			mode="button"
			:list="list"
			:current="current"
			@change="change"
			fontSize="28rpx"
			></uv-subsection>
		</view>
		
		<!-- 未过期 -->
		<view v-show="current == 0" class="content-box" style="padding-top: 20rpx;">
			<view v-if="dataList.length > 0" class="content">
				<view v-for="(item,index) in dataList" class="con-card" :key="index">
					<view class="card-left" :class="{'bgc-none': item.isExpired || item.isUsed}">
						<view class="top">
							<span style="font-size: 50rpx;margin-right: 10rpx;">{{item.price}}</span>
							<span>￥</span>
						</view>
						<view class="bot">
							购物券
						</view>
					</view>
					<view class="card-right">
						<view class="right-top">
							{{item.name}}
						</view>
						<view class="right-center">
							使用范围：69商城通用券
						</view>
						<view class="right-bot">
							有效期至：{{item.endTime}}
						</view>
						<view v-if="item.isUsed" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onused.png" alt=""/>
						</view>
						<view v-else-if="item.isExpired" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onend.png" alt=""/>
						</view>
					</view>
				</view>
				<u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</view>
			<view v-else class="nomore">
				<ljshop-empty :image="`https://image.hzwltb69.com/app/date/2023/暂无商品.png`" ></ljshop-empty>
				<view class="">
					暂无优惠券
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view v-show="current == 1" class="content-box" style="padding-top: 20rpx;">
			<view v-if="dataList.length > 0" class="content">
				<view v-for="(item,index) in dataList" class="con-card" :key="index">
					<view class="card-left" :class="{'bgc-none': item.isExpired || item.isUsed}">
						<view class="top">
							<span style="font-size: 50rpx;margin-right: 10rpx;">{{item.price}}</span>
							<span>￥</span>
						</view>
						<view class="bot">
							购物券
						</view>
					</view>
					<view class="card-right">
						<view class="right-top">
							{{item.name}}
						</view>
						<view class="right-center">
							使用范围：69商城通用券
						</view>
						<view class="right-bot">
							有效期至：{{item.endTime}}
						</view>
						<view v-if="item.isUsed" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onused.png" alt=""/>
						</view>
						<view v-else-if="item.isExpired" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onend.png" alt=""/>
						</view>
					</view>
				</view>
				<u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</view>
			<view v-else class="nomore">
				<ljshop-empty :image="`https://image.hzwltb69.com/app/date/2023/暂无商品.png`" ></ljshop-empty>
				<view class="">
					暂无优惠券
				</view>
			</view>
		</view>
		<!-- 过期 -->
		<view v-show="current == 2" class="content-box" style="padding-top: 20rpx;">
			<view v-if="dataList.length > 0" class="content">
				<view v-for="(item,index) in dataList" class="con-card" :key="index">
					<view class="card-left" :class="{'bgc-none': item.isExpired || item.isUsed}">
						<view class="top">
							<span style="font-size: 50rpx;margin-right: 10rpx;">{{item.price}}</span>
							<span>￥</span>
						</view>
						<view class="bot">
							购物券
						</view>
					</view>
					<view class="card-right">
						<view class="right-top">
							{{item.name}}
						</view>
						<view class="right-center">
							使用范围：69商城通用券
						</view>
						<view class="right-bot">
							有效期至：{{item.endTime}}
						</view>
						<view v-if="item.isUsed" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onused.png" alt=""/>
						</view>
						<view v-else-if="item.isExpired" class="onend">
							<image src="https://image.hzwltb69.com/app/date/2023/onend.png" alt=""/>
						</view>
					</view>
				</view>
				<u-loadmore height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</view>
			<view v-else class="nomore">
				<ljshop-empty :image="`https://image.hzwltb69.com/app/date/2023/暂无商品.png`" ></ljshop-empty>
				<view class="">
					暂无优惠券
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dataList:[],
				page: 1,
				loadStatus: 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				list:['未过期','已使用','过期'],
				current: 0,
				type: 1,
			}
		},
		onReachBottom() {
			this.page += 1
			this.getList()
		},
		created() {
			this.getList()
		},
		methods:{
			getList(){
				this.$http('coupons.getUserCoupons',{
					current: this.page,
					pageSize: 10,
					type: this.type,
				})
				.then(res=>{
					if(res.data){
						this.dataList.length == 0 ? this.dataList = res.data :
						this.dataList = this.dataList.concat(res.data)
						if(res.data.length < 10){
							this.onEnd = true
							this.loadStatus = 'nomore'
						}else{
							this.loadStatus = 'loadmore'
						}
					}else{
						this.onEnd = true
						this.loadStatus = 'nomore'
					}
				})
			},
			change(e){
				 if(this.current == e) return
				 this.current = e;
				 this.type = e+1;
				 this.page = 1;
				 this.dataList = [];
				 this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx;
		text-align: center;
		.con-card{
			height: 200rpx;
			width: 100%;
			border-radius: 25rpx;
			display: flex;
			margin-bottom: 20rpx;
			.card-left{
				height: 100%;
				width: 240rpx;
				background: linear-gradient(150deg,#ff8486,#fc3839);
				border-radius: 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #fff;
				z-index: 99;
				.bot{
					font-size: 28rpx;
				}
				
			}
			.card-right{
				width: 460rpx;
				background: #fff;
				height: 100%;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 25rpx;
				text-align: start;
				color: #B9B9B9;
				padding-left: 20rpx;
				position: relative;
				.onend{
					position: absolute;
					width: 100rpx;
					height: 100rpx;
					top: 20rpx;
					right: 20rpx;
					// background-color: skyblue;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right-top{
					color: #666666;
				}
				.right-center{
					margin-top: 15rpx;
					margin-bottom: 15rpx;
				}
			}
		.card-right:before{
			content: "";
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #f6f6f6;
			top: -2rpx;
			left: -13rpx;
		}
		.card-right:after {
			content: "";
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #f6f6f6;
			bottom: -2rpx;
			left: -13rpx;
		}
		}
		.bgc-yellow{
			background: linear-gradient(150deg,#ffdd8c,#fea026) !important;
		}
		.bgc-none{
			background: #d2d2d2 !important;
		}
	}
	.nomore{
		padding-top: 200rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666666;
		font-size: 25rpx;
	}
</style>